<template>
    <div>
      <input type="text" placeholder="请输入关键字">
      <button @click="">查找</button>
      <button @click="btnAdd">新增</button>
    </div>
    
    <table>

      <thead>
        <tr>
          <th>序号</th>
          <th>书名</th>
          <th>作者</th>
          <th>简介</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in bookList" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.title }}</td>
          <td>{{ item.author }}</td>
          <td>{{ item.shortDes }}</td>
          <td>
            <button @click="editBook(item.id)">编辑</button>
            <button @click="deleteBook(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </template>
  
  <script setup>
  
  import { useRouter } from 'vue-router';
  import {onMounted,reactive,ref} from 'vue';
  import {delBook,getAll} from "@/api/bookApi";


  
  const router = useRouter();
  
  // 模拟数据
  const bookList =ref([])
  
  function btnAdd() {
    router.push('/bookAdd');
  }

  
  function editBook(id) {
    router.push(`/bookEdit/${id}`);
  }
  
  function deleteBook(id) {
    if (confirm('确定删除这本书吗？')) {
      delBook(id)

      let idx = bookList.findIndex(item => item.id ===id)
      console.log(idx);
      bookList.splice(idx,1)
      
      // 调用删除API
      console.log('删除书籍:', id);
    }
  }
  onMounted(async ()=>{
    let res = await getAll();
    bookList.value=res.data
  })
//   onMounted(async () => {
//     let res = await getAll();
//     console.log('api数据', res);
//     bookList.value = res.data;
// })
  </script>
